<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 字体图标 -->
			<pj-demo title="字体图标">
				<pure-grid columns="5">
					<pure-block
						v-for="icon in iconfonts"
						:key="icon"
					>
						<view class="item">
							<pure-icon
								class="icon"
								:name="icon"
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 图片图标 -->
			<pj-demo title="图片图标">
				<pure-grid columns="5">
					<pure-block
						v-for="icon in images"
						:key="icon"
					>
						<view class="item">
							<pure-icon
								class="icon"
								:name="icon"
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 扩展图标 -->
			<pj-demo title="扩展图标">
				<pure-grid columns="5">
					<pure-block
						v-for="icon in exts"
						:key="icon"
					>
						<view class="item">
							<pure-icon
								class="icon"
								:name="icon"
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 图标主题 -->
			<pj-demo title="图标主题">
				<pure-grid columns="5">
					<pure-block
						v-for="theme in iconThemes"
						:key="theme"
					>
						<view class="item">
							<pure-icon
								class="icon"
								name="__tijiaoyanzi"
								:theme="theme"
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 图标主题 -->
			<pj-demo title="扩展主题">
				<pure-grid columns="5">
					<pure-block
						v-for="theme in extThemes"
						:key="theme"
					>
						<view class="item">
							<pure-icon
								class="icon"
								name="__tijiaoyanzi"
								:theme="theme"
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-grid columns="5">
					<pure-block
						v-for="theme in iconThemes"
						:key="theme"
					>
						<view class="item">
							<pure-icon
								class="icon"
								name="__tijiaoyanzi"
								:theme="theme"
								disabled
							></pure-icon>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 内置图标 -->
			<pj-demo
				title="内置图标"
				desc="点击复制名称"
			>
				<pure-grid columns="5">
					<pure-block
						v-for="icon in all"
						:key="icon.name + icon.text"
						@onClick="handleItemClick(icon)"
					>
						<view class="item">
							<pure-icon
								:name="icon.name"
								class="icon"
							></pure-icon>
							<view class="text">{{ icon.text }}</view>
						</view>
					</pure-block>
				</pure-grid>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 字体图标
	const iconfonts = ref(["__loading", "__arrow-left", "__arrow-right"]);

	// 图片图标
	const images = ref([
		"/static/images/i_001.png",
		"/static/images/i_002.png",
		"/static/images/i_003.png",
		"/static/images/i_004.png",
		"/static/images/i_005.png"
	]);

	// 扩展图标
	const exts = ref([
		"__jubao",
		"__anquanbaozhang",
		"__xiaoxi-zhihui",
		"proj-iconfont proj-iconfont-yeqing",
		"__yanziwancheng"
	]);

	// 图标主题
	const iconThemes = ref(["primary", "success", "warning", "danger", "info"]);

	// 扩展主题
	const extThemes = ref(["--my-theme-1", "--my-theme-2", "--my-theme-3"]);

	// 全部内置图标
	const all = ref([
		{ text: "眼睛", name: "__eye" },
		{ text: "上传", name: "__upload" },
		{ text: "提示", name: "__tips" },
		{ text: "垃圾桶", name: "__trash" },
		{ text: "左箭头", name: "__arrow-left-double" },
		{ text: "右箭头", name: "__arrow-right-double" },
		{ text: "搜索", name: "__search" },
		{ text: "公告", name: "__notice" },
		{ text: "编辑", name: "__edit" },
		{ text: "减", name: "__reduce" },
		{ text: "加", name: "__plus" },
		{ text: "清除", name: "__clear" },
		{ text: "勾选", name: "__checked" },
		{ text: "关闭", name: "__close" },
		{ text: "主页", name: "__home" },
		{ text: "loading", name: "__loading" },
		{ text: "左箭头", name: "__arrow-left" },
		{ text: "右箭头", name: "__arrow-right" },
		{ text: "星星", name: "__favorite" },
		{ text: "星星", name: "__favorite-fill" },
		{ text: "心心", name: "__follow" },
		{ text: "心心", name: "__follow-fill" }
	]);

	// 图标点击事件
	// item: 图标数据
	function handleItemClick(icon) {
		// 复制图标名称
		uni.setClipboardData({
			data: icon.name,
			success: () => {
				uni.showToast({
					title: "复制成功",
					icon: "success",
					duration: 1000
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		// 扩展主题
		--my-theme-1: #fa0303;
		--my-theme-2: #7604f8;
		--my-theme-3: #c8ff00;

		.item {
			width: 100%;
			height: 100%;
			border-radius: var(--pure-radius-default);
			background: var(--pure-background-default);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 4px;

			.icon {
				font-size: var(--pure-font-size-big);
			}

			.text {
				font-size: var(--pure-font-size-small);
			}
		}
	}
</style>
